<template>
  <div class="article-item">
    <router-link
      custom
      :to="{ path: `/post/${post.postId}` }"
      v-slot="{ href }"
    >
      <h2 class="title" @click="openHref(href)">{{ post.title }}</h2>
    </router-link>
    <p class="abstract">
      {{ post.brief }}
    </p>
    <div class="about">
      <router-link
        custom
        :to="{ name: 'info-center', params: { userId: post.author.userId } }"
        v-slot="{ href }"
      >
        <span
          v-if="post.author.nickname"
          @click="openHref(href)"
          class="author"
          >{{ post.author.nickname }}</span
        >
      </router-link>
      <span class="comment-count">
        <i class="el-icon-chat-square"></i>
        {{ post.commentCount }}
      </span>
      <span class="like-count"
        ><i class="fa fa-heart"></i> {{ post.likeCount }}</span
      >
      <span v-if="post.createTime" class="post-time" style="margin-left: 10px">{{
        post.createTime | MyTime
      }}</span>
        <router-link
        v-if="post.forum"
        custom
        :to="{ name: 'forum', params: { id: post.forum.id } }"
        v-slot="{ href }"
      >
        <span
          style="float:right"
      
          @click="openHref(href)"
          class="author"
          >{{ post.forum.forumName }}</span
        >
      </router-link>
    </div>

    <div class="operation">
      <slot name="operation">
        <!-- <i  class="el-icon-more-outline"></i> -->
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showOperation: {
      default: false,
      type: Boolean,
    },
    post: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  methods: {
    openHref(href) {
      window.open(href);
    },
  },
};
</script>

<style scoped lang="less">
@import "@/assets/less/common.less";
.article-item {
  position: relative;
  width: 650px;
  padding: 20px 5px;
  border-bottom: 1px solid @borderBase;
  .title {
    line-height: 42px;
    font-size: 24px;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
  .abstract {
    line-height: 30px;
    margin-bottom: 15px;
    color: @regularText;
  }
  .about {
    color: @regularText;
    .author {
      margin-right: 10px;
      cursor: pointer;
      &:hover {
        color: @primaryText;
      }
    }
    .comment-count {
      &:hover {
        color: @primaryText;
      }
      cursor: pointer;
      margin-right: 10px;
    }
  }
  .operation {
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 0;
    font-size: 20px;
  }
}
</style>